<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script language="javascript" src="/ext/examples/ux/Spotlight.js"></script>

    <script type="text/javascript">
        Ext.onReady(function() {

            var spot = new Ext.ux.Spotlight({
                easing: 'easeOut',
                duration: .3
            });

            var myWin = Ext.extend(Ext.Window, {
                width:100,
                height:100,
                toggle: function(on) {
                    this.setDisabled(!on);
                    this.show();
                }
            })

            var p1, p2, p3;
            var updateSpot = function(id) {
                if (typeof id == 'string') {
                    spot.show(id);
                } else if (!id && spot.active) {
                    spot.hide();
                }

                p1.toggle(id == p1.id);
                p2.toggle(id == p2.id);
                p3.toggle(id == p3.id);
            };

            p1 = new myWin({
                id: 'win1',
                title:'win1',
                x:100,
                y:300,
                buttons: [
                    {
                        text: 'Next Panel',
                        handler: updateSpot.createDelegate(this, ['win2'])
                    }
                ]
            });



            p2 = new myWin({
                id: 'win2',
                title:'win2',
                x:250,
                y:300,
                buttons: [
                    {
                        text: 'Next Panel',
                        handler: updateSpot.createDelegate(this, ['win3'])
                    }
                ]
            });


            p3 = new myWin({
                id: 'win3',
                title:'win3',
                x:400,
                y:300,
                buttons: [
                    {
                        text: 'Next Panel',
                        handler: updateSpot.createDelegate(this, [false])
                    }
                ]
            });


            new Ext.Button({
                text: 'Start',
                renderTo: Ext.getBody(),
                handler: function (){
                    updateSpot(false);
                    setTimeout(updateSpot.createDelegate(this, ['win1']), 100);
                }
            });


            //updateSpot(false);
        });

    </script>
</head>
<body style="background-color:#ffffff;">

</body>
</html>